import React, { useState } from 'react'
import Header from '../../components/Header'
import FooterBar from '../../components/FooterBar'
import Search from '../../components/Search';
import './index.css'
import menImg from '../../assets/image/陈多多.png'
import sp2 from '../../assets/image/商品2.png'
import sp3 from '../../assets/image/商品3.png'
import sp4 from '../../assets/image/商品4.png'
import sp5 from '../../assets/image/商品5.png'
import hbImg from '../../assets/image/汉堡.png'
import skImg from '../../assets/image/烧烤.png'
import zcImg from '../../assets/image/中餐 (1).png'
import hgImg from '../../assets/image/火锅.png'
import { Swiper } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';



export default function Home() {
  const history = useNavigate();

  const [footBox, setFootBox] = useState([
    {
      src: sp2,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
    {
      src: sp3,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
    {
      src: sp5,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
    {
      src: menImg,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
    {
      src: sp4,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
    {
      src: menImg,
      tittle: '牛肉面非常好吃的牛肉面非常好吃的牛肉面非常好吃的',
      footNum: '500',
      price: '174',
      oldPrice: '2000'
    },
  ]);

  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];

  const swiperItems = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className='foot_content'
        style={{ background: color }}
      // onClick={}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ))

  const jumpPage = () => {
    history('/doorOrder')
  };


  return (
    <div>
      <Header />
      <div className='homeMain'>
        {/* 搜索 */}
        <Search />
        {/* 走马灯 */}
        <Swiper
          loop
          autoplay
          onIndexChange={i => {
            console.log(i, 'onIndexChange1')
          }}
        >
          {swiperItems}
        </Swiper>
        {/* 分类 */}
        <div className='foot_header'>
          <div className='foot_header_box'>
            <img src={hbImg} alt="" className='foot_header_img' />
            <div>快餐</div>
          </div>
          <div className='foot_header_box'>
            <img src={zcImg} alt="" className='foot_header_img' />
            <div>中餐</div>
          </div>
          <div className='foot_header_box'>
            <img src={skImg} alt="" className='foot_header_img' />
            <div>饮料</div>
          </div>
          <div className='foot_header_box'>
            <img src={hgImg} alt="" className='foot_header_img' />
            <div>面食</div>
          </div>
        </div>
        {/* 瀑布流 */}
        <div className='foot_banner'>
          {
            footBox.map((item) => {
              return (
                <div
                  className='foot_banner_box'
                  onClick={() => jumpPage()}>
                  <div className='foot_banner_img'>
                    <img src={item.src} alt="" className='foot_logo' />
                  </div>
                  <div className='foot_banner_tittle'>
                    {item.tittle}
                  </div>
                  <div className='foot_banner_num'>
                    已售{item.footNum}+
                  </div>
                  <div className='foot_banner_price'>
                    ￥{item.price}
                    <span className='foot_banner_oldPrice'>
                      ￥{item.oldPrice}
                    </span>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
      <FooterBar />
    </div>
  )
}
